<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>
<div class="cls">传智教育</div>   <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
    //① 根据 id 属性值获取上面的 img 元素对象，返回单个对象。
    var img = document.getElementById("light");
    alert(img); //[object HTMLImageElement]
    //② 根据标签名称获取所有的 div 元素对象。
    var divs = document.getElementsByTagName("div");
    alert(divs.length); //2
    for (const div of divs) {
        alert(div); //[object HTMLDivElement]
    }
    //③ 获取所有的满足 name = 'hobby' 条件的元素对象。
    let hobbys = document.getElementsByName("hobby");
    alert(hobbys.length);   //3
    for (const hobby of hobbys) {
        alert(hobby);   //[object HTMLInputElement]
    }
    //④ 获取所有的满足 class='cls' 条件的元素对象
    var clss = document.getElementsByClassName("cls");
    alert(clss.length); //2
    for (const cls of clss) {
        alert(cls); //[object HTMLDivElement]
    }

</script>
</body>
</html>